<template>
  <el-dialog
    title="反馈"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="dialog-wrap"
    width="890px"
    @close="cancel"
  >
    <ContainerTitle text="反馈" class="title"></ContainerTitle>
    <div class="feedback-box">
      <el-input
        class="marginBom"
        type="textarea"
        :rows="5"
        maxlength="150"
        show-word-limit
        placeholder="请输入本次培训的体验和建议"
        v-model.trim.trim="feedback"
      >
      </el-input>
      <textComponent @changeSelect="changeSelect" />
    </div>
    <ContainerTitle text="培训期望" class="title"></ContainerTitle>
    <el-input
      class="marginBom"
      type="textarea"
      :rows="5"
      maxlength="150"
      show-word-limit
      placeholder="请输入下次培训的期望"
      v-model.trim.trim="suggest"
    >
    </el-input>
    <div class="footer">
      <Buttons @cancel="cancel" @save="save" :buttons="buttons"></Buttons>
      <!-- <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">提 交</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import textComponent from "./textComponent";
// api
import { save } from "@/common/api/company.js";
export default {
  name: "feedbackDialog",
  components: { textComponent },
  props: ["id"],
  data() {
    return {
      buttons: [
        { text: "取消", type: "normal", size: "l", method: "cancel" },
        { text: "提交", type: "success", size: "l", method: "save" },
      ],
      feedback: "", //反馈
      suggest: "", //建议
      dialogVisible: false, //控制弹框显示隐藏
    };
  },
  methods: {
    // 保存表单
    async save(formName) {
      // let params = {
      //     id: this.id,
      //     feedback: this.feedback,
      //     suggest: this.suggest
      // };
      // console.log(params);
      if (!this.feedback) {
        return this.$message.warning("请输入反馈信息！");
      }
      if (!this.suggest) {
        return this.$message.warning("请输入建议信息！");
      }
      let formData = new FormData();
      formData.append("id", this.id);
      formData.append("feedback", this.feedback);
      formData.append("suggest", this.suggest);
      const { code, msg } = await save(formData);
      if (code != "200") return this.$message.warning(msg);
      this.feedback = ""; //反馈
      this.suggest = ""; //建议
      this.dialogVisible = false;
      this.$message.success("反馈成功！");
      this.$emit("refresh", this.id);
    },
    // 改变页签
    changeSelect(d) {
      this.feedback = d.text;
    },
    // 取消表单操作
    cancel() {
      this.feedback = ""; //反馈
      this.suggest = ""; //建议
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
>>> .el-dialog__title {
  color: #333;
}

.feedback-box >>> .el-textarea__inner {
  border: none;
  border-bottom: 1px solid #eee;
}

.feedback-box {
  border: 1px solid #eee;
  margin-bottom: 40px;
}

.title {
  font-size: 20px;
  text-align: left;
  font-weight: bold;
  border-bottom: 2px solid #045db9;
  color: #045db9;
  margin-bottom: 20px;
}

.marginBom {
  margin-bottom: 15px;
}

.footer {
  display: flex;
  justify-content: flex-end;
}

>>> .el-button {
  font-size: 14px;
}

>>> .el-button--primary {
  background-color: #045db9;
}
</style>
